<template >
    <div>
             <!-- 面包屑导航区域 -->
       <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCate">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格 -->
           <tree-table class="treetable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
               <!-- 是否有效模板 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success"
                    v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else style="color:deepred"></i>
                </template>
            <!-- 排序模板 -->
            <template slot="order" slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
                <el-tag size="mini" type="warning" v-else>三级</el-tag>
            </template>
                <!-- 操作模板 -->
               <template slot="opt" slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </template>
                
           </tree-table>
            <!-- 分页区域 -->
            <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3,5,10,15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>   
        </el-card>

        <!-- 添加分类对话框 -->
            <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="50%"
        @cliose=addCateDialogClosed> 
          <el-form :model="addCateForm" :rules="addRules" ref="RuleformRef" label-width="100px" >
                <el-form-item label="分类名称" prop="cate_name">
                  <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <!-- options指定数据源 -->
                <!-- props指定配置对象 -->
                 <el-form-item label="父级名称" prop="password">
                     <el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable change-on-select>
          </el-cascader>
                </el-form-item>
            </el-form> 
          <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="addDialogVisible = false">取 消</el-button>
                <el-button type="danger" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //商品分类的数据列表，默认为空
            catelist:[],
            total:0,
            //为table指定列的定义
            columns:[{
                lable:'分类名称',
                prop:'cat_name'
            },
            {
                label:'是否有效',
                //表示当前列定义为模板
                type:'template',
                template:'isok'
            },
            {
                label:'排序',
                type:'template',
                template:'order'
            },
            {
                label:'操作',
                type:'template',
                template:'opt'
            }],
            addCateForm:{
                // 将要添加的分类的名称
                 cat_name: '',
                 // 父级分类的Id
                 cat_pid: 0,
                 // 分类的等级，默认要添加的是1级分类
                 cat_level: 0
            },
            addDialogVisible:false,
            //添加分类表单的验证规则对象
            addRules: {
                    cat_name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                            ]
             },
            //父级分类列表
            parentCateList:[],
            //指定级联选择器的配置
            cascaderProps:{
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            //选中的腹肌分类的Id数组
            selectedKeys:[]

        }
    },
    created(){
        this.getCateList()
    },
    methods:{
       async getCateList(){
            const { data:res } = await this.$http.get('categories',{ params: this.querInfo})

            if(res.meta.status !== 200){
                return this.$message.error('获取商品分类失败!')
                
            }
            //把数据列表赋值给商品分类catelist
            this.catelist = res.data.result
            this.total = res.data.total
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize){
        this.querInfo.pagesize=newSize
        this.getCateList()
    },
    // 监听pagenum改变
    handleCurrentChange(newPage){
        this.querInfo.pagenum = newPage
        this.getCateList()
    },
    showAddCate(){
        // 先获取父级分类的数据列表
        this.getParentCateList()
        // 再展示出对话框
        this.addDialogVisible = true
    },
    //获取父级分类的数据列表
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: { type: 2 }
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类数据失败！')
      }

      console.log(res.data)
      this.parentCateList = res.data
    },
    //选择项发生改变触发这个函数
    parentCateChanged(){
  console.log(this.selectedKeys)
      // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
      // 反之，就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[
          this.selectedKeys.length - 1
        ]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      } else {
        // 父级分类的Id
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
    },
    addCate(){
        console.log(3);
        
        this.$refs.RuleformRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          'categories',
          this.addCateForm
        )

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败！')
        }

        this.$message.success('添加分类成功！')
        this.getCateList()
        this.addDialogVisible = false
      })
    },
       // 监听对话框的关闭事件，重置表单数据
    addCateDialogClosed() {
      this.$refs.RuleformRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    }
      
    }
}
</script>
<style lang="less" >
    .treetable{
        margin-top:10px;
          .el-cascader{
        width:100%;
    }
  
    }
.el-popper {
  .el-cascader-panel {
    .el-scrollbar {
      height: 208px;
    }
  }
}


</style>